<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.grandpa {
				position: relative;
				width: 600px;
				height: 600px;
				padding: 50px;
				background-color: pink;
				margin: 0 auto;
			}

			.box {
				/*position: relative;*/
				width: 600px;
				height: 600px;
				background-color: red;
				/*margin: 100px auto 0;*/
			}

			.in {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				
				/*
					绝对定位, 相对于距离自己最近的具有定位属性的(值不为static)父辈元素进行定位
				*/
				position: absolute;

				left: 0px;
				bottom: 0px;
			}

			.blue {
				width: 200px;
				height: 200px;
				background-color: blue;

				/*
					绝对定位使元素脱离文档流
				*/
				position: absolute;
			}

			.gold {
				width: 300px;
				height: 300px;
				background-color: gold;
			}

			a {
				width: 200px;
				height: 200px;
				background-color: black;
				color: white;
				/*
					绝对定位也会改变元素的特性
				*/
				position: absolute;
			}
		</style>
	</head>
	<body>

		<div class="grandpa">
			<div class="box">
				<div class="in"></div>
			</div>
		</div>

		<div class="blue"></div>
		<div class="gold"></div>
		<a href="">呵呵</a>
		
	</body>
</html>